<template>
  <div v-if="page.total > 0" class="pagination">
    <div class="mr-3 total">{{ $t('page.total') }} {{ page.total }} {{ $t('page.records') }}</div>
    <ul>
      <li class="prev">
        <a href="javascript:void(0);" @click="pageLast()"><i class="mr-1" />{{ $t('page.upPage') }}</a>
      </li>
      <li v-if="start != 1" class="dotted"><span>...</span></li>
      <li v-for="num in getCount()">
        <a href="javascript:void(0);":class="[page.currentPage == num ? 'active' : '']" @click="changePage(num)">{{ num }}</a>
      </li>
      <li v-if="end != page.pagerCount" class="dotted"><span>...</span></li>
      <li>
        <input v-model="offest" type="text" class="page-input" @keyup.enter="inputKeyUp($event)">&nbsp;/&nbsp;{{ page.pagerCount }} {{ $t('page.page') }}
      </li>
      <li class="next">
        <a href="javascript:void(0);" @click="pageNext()">{{ $t('page.dowmPage') }}<i class="sui-icon icon-touch-double-angle-right ml-1" /></a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    page: {
      type: Object,
      default: {
        total: 0,
        limit: 10,
        pageSize: 10,
        pagerCount: 1,
        currentPage: 1
      }
    }
  },
  data() {
    return {
      start: 1,
      end: 1,
      pageInput: 1,
      offest: 1
    }
  },
  watch: {
    pageInput: {
      handler(val) {
        this.offest = val
      }
    }
  },
  created() {
    console.log(this.page.total)
  },
  methods: {
    inputKeyUp: function(e) {
      let value = e.target.value
      if (isNaN(value)) {
        value = e.target.value.replace(/\D/g, '')
      }
      value = Number(value)
      if (value <= 0) {
        value = 1
      }
      if (parseInt(value) > parseInt(this.page.pagerCount)) {
        value = this.page.pagerCount
      }
      if (e.keyCode == 13) {
        this.page.currentPage = value
        this.changePage(value)
      }
    },
    pageLast: function() {
      if (this.page.currentPage > 1) {
        this.changePage(this.page.currentPage - 1)
      }
    },
    pageNext: function() {
      if (parseInt(this.page.currentPage) < parseInt(this.page.pagerCount)) {
        this.changePage((this.page.currentPage - 0) + 1)
      }
    },
    changePage: function(pageIndex) {
      this.page.currentPage = pageIndex
      this.page.pageTo()
      this.resetLimit(this.page.currentPage, this.page.pagerCount)
    },
    getCount: function() {
      this.resetLimit(this.page.currentPage, this.page.pagerCount)
      var arr = []
      for (var i = this.start; i <= this.end; i++) {
        arr.push(i)
      }
      return arr
    },
    resetLimit: function(pageIndex, pageCount) {
      console.log('start传入参数:' + this.start + '--' + this.end)
      console.log(Math.max(this.start - this.page.pageSize, pageIndex) + '==max')
      console.log(Math.min(this.start + this.page.pageSize, pageCount) + '==min')
      if (pageIndex > this.start && pageIndex < this.end) {
        this.pageInput = pageIndex
        return
      }
      if (pageIndex == this.start || pageIndex == 1) {
        this.start = pageIndex
        this.start = Math.max(this.start - this.page.pageSize, pageIndex)
        this.end = Math.min(this.start + this.page.pageSize, pageCount)
      } else if (pageIndex == this.end || pageIndex == pageCount) {
        this.end = pageIndex
        this.end = Math.min(this.end + this.page.pageSize, pageCount)
        this.start = Math.max(this.end - this.page.pageSize, 1)
      } else {
        this.start = pageIndex
        var tmp = (pageIndex - 0) % (this.page.pageSize - 0)
        var tmp2 = parseInt((pageIndex - 1) / this.page.pageSize)
        if (tmp == 1) {
          this.start = Math.max(this.start - this.page.pageSize, this.start)
          this.end = Math.min(this.start + this.page.pageSize, pageCount)
          if (this.end == pageCount) {
            this.start = Math.min(this.end - (this.page.pageSize / 2), this.start)
            if (this.start <= 0) {
              this.start = 1
            }
          }
        } else {
          this.start = Math.max(this.start - this.page.pageSize, (tmp2 * this.page.pageSize) + 1)
          this.end = Math.min(this.start + this.page.pageSize, pageCount)
          if (this.end == pageCount) {
            this.start = Math.min(this.end - (this.page.pageSize / 2), this.start)
            if (this.start <= 0) {
              this.start = 1
            }
          }
        }
      }
      console.log('start-end:' + this.start + '---' + this.end)
      console.log('pageInput输出:' + pageIndex)
      this.pageInput = pageIndex
    }
  }
}
</script>

<style scoped>

</style>
